<!--  -->
<template>
    <div class="common-layout">
        <el-container>
            <el-header>
                <div class="common-layout">
                    <el-container>
                        <el-form :inline="true" :model="formInline" class="demo-form-inline">
                            <el-form-item style="width:100px;">
                                <el-input v-model="formInline.order" placeholder="订单号" />
                            </el-form-item>
                            <el-form-item style="width:150px;">
                                <el-input v-model="formInline.seller" placeholder="用户ID" />
                            </el-form-item>

                            <!-- <el-form-item style="width:100px;">
                                        <el-select v-model="formInline.zh" placeholder="文件状态">
                                            <el-option label="未上架" value="noup" />
                                            <el-option label="已上架" value="yup" />
                                            <el-option label="预售中" value="booking" />
                                            <el-option label="出售中" value="saleing" />
                                            <el-option label="已售罄" value="done" />
                                        </el-select>
                                    </el-form-item> -->
                            <el-form-item style="width:80px;">
                                <el-button type="primary" @click="reset">重置</el-button>
                            </el-form-item>
                        </el-form>
                        <!-- <button class="add">新增</button> -->
                    </el-container>
                </div>
            </el-header>
            <el-main>
                <div class="common-layout">
                    <el-container>
                        <el-header class="bottom-header">
                            <el-table :data="tableData" style="width: 100%" empty-text="暂无数据"
                                :header-cell-style="{ background: '#EFF0FD', color: '#606266' }">
                                <el-table-column label="ID" prop="ID" width="50" />
                                <el-table-column label="订单编号" prop="orderinfo" width="150" />
                                <el-table-column prop="userid" label="用户账号" width="150" />
                                <el-table-column prop="seller" label="所属邀请" width="120" />
                                <el-table-column prop="colinfo" label="作品信息" width="220" />
                                <el-table-column prop="ordertime" label="下单时间" width="220" />
                            </el-table>
                        </el-header>
                        <el-main class="bottom-bar">
                            <span>总计 <span class="number">{{tableData.length}}</span> 条数据</span>
                            <el-pagination :page-size="20" :pager-count="11" layout="prev, pager, next" :total="100" />
                        </el-main>
                    </el-container>
                </div>
            </el-main>
        </el-container>
    </div>
</template>

<script>
export default {
    name: 'ArtOrders',
    data() {
        return {
            formInline: {
                buyer: '',
                seller: '',
                list: [],
            },
            tableData: [
                { 'ID': '1', 'orderinfo': '123456789', 'userid': '13880069369', 'seller': '官方', 'colinfo': '带球狂奔', 'ordertime': '2022-11-01 10:18:30' },
                { 'ID': '2', 'orderinfo': '123456787', 'userid': '13288886666', 'seller': '官方', 'colinfo': '星河鲸梦', 'ordertime': '2022-10-30 19:30:00' },
                { 'ID': '3', 'orderinfo': '123456788', 'userid': '13297900560', 'seller': '官方', 'colinfo': '带球狂奔', 'ordertime': '2022-11-15 20:50:56' },
            ],
        };
    },

    mounted() {

    },

    methods: {
        reset() {
            this.formInline = {
                works: '',
                type: '',
                zh: '',
            }
        }
    },
};
</script>

<style lang="css" scoped>
.el-main {
    padding: 0 !important;
}

.el-header {
    height: 50px;

}


.el-aside {
    overflow: hidden;
}

.el-form-item {
    margin-right: 10px;
}

.flex {
    margin-top: 20px;
}

/* 下方数据 */
.bottom-header {
    height: 370px;

}

.el-table {
    margin-top: 20px;
    box-shadow: 0 0 5px rgb(195, 206, 217);
}

.bottom-bar {
    border-top: 1px solid silver;
}

.el-pagination {
    float: left;
    margin-top: 10px;
}

.bottom-bar > span {
    margin-top: 16px;
    display: inline-block;

}

.add {
    height: 33px;
    margin-left: 300px;
    width: 60px;
    border: none;
    color: #fff;
    border-radius: 5px;
    background-color: red;
    cursor: pointer;
}

.add:hover {
    background-color: rgb(242, 85, 85);
}
</style>